Виджеты. ListView GridView

➡️ Скачать презентацию. Flutter ListView GridView
➡️ Ссылка на репозиторий с кодом этого урока

Создание прокручиваемых виджетов

• В папку widgets добавим файлы:
  • listview_widget.dart
  • gridview_widget.dart
  • single_scroll_widget.dart
• В соответствующих файлах создадим виджеты:
  • ListViewExample()
  • GridViewExample()
  • ScrollExample()
• ⭕ В файле main.dart внутри виджета MyApp() в параметр body передаём:
  • ListViewExample()
  • GridViewExample()
  • ScrollExample()

Виджет SingleChildScrollView

Например, есть колонка в которой находятся три крупных цветных контейнера.
Они не вошли в экран по высоте и мы не сможем их никак просмотреть в текущем виде.

Файл single_scroll_widget.dart 

import 'package:flutter/material.dart';

class ScrollExample extends StatelessWidget {
  const ScrollExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Container(
          width: double.infinity,
          height: 400,
          color: Colors.blue[300],
        ),
        Container(
          width: double.infinity,
          height: 400,
          color: Colors.green[300],
        ),
        Container(
          width: double.infinity,
          height: 400,
          color: Colors.red[300],
        ),
      ],
    );
  }
}

                  

Чтобы просмотреть весь контент, нужно использовать прокручиваемые виджеты.

SingleChildScrollView

Это виджет для прокрутки списков или элементов интерфейса. Его следует использовать для прокрутки только небольших списков, т.к. он загружает в память весь контент сразу.

⭕ Он принимает только одного child

Основные параметры

scrollDirection : направление прокрутки (.vertical или.horizontal)
reverse : будет ли прокрутка идти в обратном порядке
padding : отступы вокруг содержимого
controller : контроллер прокрутки
physics : задает физику прокрутки
clipBehavior : как обрезать содержимое, выходящее за границы

Обернём Column c помощью SingleChildScrollView, теперь есть возможность прокручивать список по вертикали (по умолчанию)

Файл single_scroll_widget.dart 

import 'package:flutter/material.dart';

class ScrollExample extends StatelessWidget {
  const ScrollExample({super.key});

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Column(
        children: [
          Container(
            width: double.infinity,
            height: 400,
            color: Colors.blue[300],
          ),
          Container(
            width: double.infinity,
            height: 400,
            color: Colors.green[300],
          ),
          Container(
            width: double.infinity,
            height: 400,
            color: Colors.red[300],
          ),
        ],
      ),
    );
  }
}
                  

Горизонтальная прокрутка

Файл single_scroll_widget.dart 

import 'package:flutter/material.dart';

class ScrollExample extends StatelessWidget {
  const ScrollExample({super.key});

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      scrollDirection: Axis.horizontal,
      child: Row(
        children: [
          Container(width: 250, height: 250, color: Colors.blue[300]),
          Container(width: 250, height: 250, color: Colors.green[300]),
          Container(width: 250, height: 250, color: Colors.red[300]),
        ],
      ),
    );
  }
}